웹사이트 입력폼 디자인의 원칙 4가지 | 매거진에 참여하세요

사이트에서 방문자로부터 정보를 수집해야 한다면 폼을 사용해야 할 가능성이 높습니다.

따라서 우리는 폼이 사이트나 앱 경험에서 가장 중요한 부분 중 하나라고 생각합니다. 그러나 안타깝게도 폼은 대부분 사이트 소유주를 위해 디자인되며, 사용자를 위한 경우는 드뭅니다.

어디선가 폼이 청중과의 대화의 시작이라고 읽은 적이 있습니다.

그 대화를 심문처럼 시작하고 싶으신가요, 아니면 친근한 대화로 시작하고 싶으신가요?

혼란스러운 입력 필드로 사용자를 혼란에 빠뜨리고 싶으신가요, 아니면 그들의 목표를 달성하기 위해 필요한 명확한 항목 목록을 제공하고 싶으신가요?

다음은 사용자와 더 나은 대화를 나누기 위한 폼 디자인의 기본 원칙입니다.

1. 절대적으로 필요한 정보만 요청하세요

사용자가 계속할 수 있도록 최소한으로 필요한 정보가 무엇인지 생각해보세요. 나중에 수집할 수 있는 정보는 무엇인가요?

폼에서 요청하는 정보가 많을수록 완료율은 낮아집니다. 또한 폼을 작성하는 데 시간이 더 걸릴수록 사람들은 답변의 필요성을 더 많이 의심하게 됩니다. 이는 심문처럼 느껴질 수 있습니다.

페이스북, 왜 내 어머니의 결혼 전 성명까지 물어보는 거죠?
이전 직장에서 일할 때, 우리의 가입 폼도 10년 전과 크게 다르지 않았습니다.

• - 우리는 생일을 알면 생일 축하 이메일을 보낼 수 있고

• - 성별을 알면 더 나은 마케팅/프로모션 아이템을 제공할 수 있다고 생각했습니다.

• 그러나 사람들은 여러 가지 이유로 그런 정보를 제공하기 꺼려한다고 말했습니다. 모두 타당한 이유였기 때문에 우리는 폼을 간소화했고, 가입률이 올라갔습니다.

우리는 계정을 생성하는 데 필요한 최소한의 정보만 요청했습니다.

사용자가 더 많은 정보를 제공하고 싶다면, 가입 후 계정 설정에서 할 수 있도록 했습니다.

불필요한 정보를 요청하는 것은 폼 디자인에서 가장 흔히 깨지는 규칙입니다. 이 글에서 이 한 가지만 기억하셔도 성공입니다.

하지만 거기서 멈추지 맙시다. 폼의 시각적 디자인도 매우 중요합니다.

2. 입력 필드의 적절한 간격은 폼의 가독성을 크게 높입니다

이 두 폼을 나란히 비교해보세요.

유일한 차이점은 두 번째 폼의 필드 간 간격이 더 넓다는 것입니다.

왼쪽 폼을 보면 라벨이 위의 필드에 해당하는지 아래 필드에 해당하는지 확신할 수 없고, 눈이 흩어집니다.

쉽게 스캔할 수 없죠. 약간의 간격을 추가하면 어떤 라벨이 어떤 입력 필드에 해당하는지 의심의 여지가 없어집니다.

필드 사이에 더 많은 공간을 추가하는 것을 두려워하지 마세요. 적절한 간격은 가독성을 향상시킵니다.

3. 단일 열 폼은 작성이 훨씬 쉬우며 완료율이 높습니다

두 열 폼은 스캔하고 추적하기 어렵습니다.

종종 완료하는 데 더 오래 걸리고 사용자 오류를 더 많이 유발합니다. 왜냐하면 눈이 다음에 어디로 가야 할지 모르기 때문입니다.

화면 전체에 펼쳐진 데이터 속에서 길을 잃게 됩니다.

페이지가 길어지더라도 사용자가 순차적으로 작성하는 것이 더 쉽습니다. 모든 필드를 한 열에 배치하면 완료율이 높아집니다.

설문조사와 같은 긴 콘텐츠도 마찬가지입니다.

새로운 디자이너들은 화면 공간을 최대화하려는 경향이 있어 모든 정보를 수직 공간에 쑤셔 넣습니다.

이 레이아웃은 어떤 라벨이 어떤 필드에 해당하는지 추적하기 어렵게 만듭니다.

항상 사용자가 한 번에 하나의 항목에 집중할 수 있도록 하세요.

4. 라벨 배치를 의도적으로 사용하세요

입력 필드에 대한 라벨의 위치가 다양하게 배치되는 것을 흔히 볼 수 있으므로, 폼에서 라벨을 어디에 배치해야 할지 모를 수 있습니다.

세 가지 최적의 라벨 위치를 살펴보고 각각의 장단점을 논의해보겠습니다.

참고: 폼 컨트롤 내부에 라벨을 배치하는 것은 권장되지 않습니다. 사용자가 클릭하여 텍스트를 입력하면 라벨이 사라지고, 필드를 지우지 않는 한 복구할 수 없기 때문입니다.

• - 왼쪽 정렬 라벨
  모든 라벨을 왼쪽에 정렬하면 요청하는 정보를 쉽게 스캔할 수 있으며, 페이지의 수직 공간을 많이 절약할 수 있습니다.

그러나 폼을 완료하는 데 더 많은 집중이 필요하며, 완료율이 낮아질 수 있습니다. 이 방법은 3-5개의 입력 필드로 구성된 짧은 폼에 적합합니다.

• 

• - 오른쪽 정렬 라벨
  라벨을 입력 필드의 오른쪽에 정렬하는 것은 왼쪽에서 오른쪽으로 스캔할 때 필드에 가장 가깝기 때문에 가장 논리적인 배치로 보입니다.

그러나 폼이 몇 개의 필드 이상으로 구성된 경우 스캔하기 어렵고 폼에서의 위치를 추적하기 어려워집니다.

• 

  - 상단 정렬 라벨
  입력 필드 상단에 라벨을 정렬하는 것은 사용자가 폼을 완료할 가능성을 높이고 오류를 줄이는 가장 좋은 방법입니다. 스캔하기 쉽고 사람들이 처리하기 가장 쉬운 형식입니다.

위의 내용은 아래 원문을 번역 및 가공한 내역으로, 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/form-design-best-practices/